<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>

        <div class="red">div1</div>
        <div>div2</div>
        <div class="red">div3</div>

        <p>p1</p>
        <p class="red">p2</p>
        <p>p3</p>

        <form action="#">
            用户名：<input type="text" name="username" value="suoge"/>
            密码： <input type="password" name="password" value="123"/>
            性别：<input type="radio" name="gender" value="male"/>男
            <input type="radio" name="gender" value="female"/>女
            <input type="submit" value="提交"/>
        </form>


        <script type="text/javascript">
            //需求1：让页面上所有div字体颜色变蓝色
            //1、获取页面上所有的div标签
            var divObjs = document.getElementsByTagName("div");//返回的结果是数组

            //2、遍历所有的div
            for (let i = 0; i < divObjs.length; i++) {
                divObjs[i].style.color = "blue";
            }


            //需求2：让页面上所有class为red的元素背景色变红色
            //1、获取页面上class属性为red的标签元素
            var els = document.getElementsByClassName("red");
            //2、遍历所有的标签元素
            for (let i = 0; i < els.length; i++) {
                els[i].style.backgroundColor = "red";
            }


            //需求3： 获取页面上name为 username 和 gender的元素，并输出其value属性的值
            //1、获取name名称为username的标签元素
            var elObj1 = document.getElementsByName("username");
            //获取name名为gender的标签元素
            var elObj2 = document.getElementsByName("gender");

            console.log("标签的value属性值：" + elObj1[0].value);
            console.log(elObj2[0].value);
            console.log(elObj2[1].value);


        </script>


    </body>
</html>